<style lang="scss" scoped>
	@import "../../style/them";


	.container {
		height: 100vh;
		width: 100vw;
		position: relative;

		.border {
			border: 6rpx solid #1c50bd;
		}

		.errcode {
			border: 0.5rpx solid red;
		}


		.box {
			height: 850rpx;
			width: 100%;
			background: $themColor;
			border-radius: 0 0 100rpx 100rpx;
			box-sizing: border-box;
		}

		.content {
			.rule {
				height: 40rpx;
				width: 100%;
				text-align: center;
				margin: 20rpx 0 140rpx 0;

				text {
					color: #1c61bd;
				}
			}

			.btn {
				height: 88rpx;
				width: 100%;
				background-color: rgba(255, 127, 10, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 40rpx;
				text-align: center;
				line-height: 88rpx;
				border-radius: 50rpx;
				margin-top: 10rpx;
			}

			.info {
				font-size: 24rpx;
				color: rgba(88, 94, 88, 100);
				margin-top: 16rpx;
			}

			.tip {
				width: 180rpx;
				height: 40rpx;
				margin-top: 16rpx;
				color: #ff7f0a;
				background-color: rgba(136, 125, 125, 0.16);
				border-radius: 30rpx;
				text-align: center;
				font-size: 28rpx;
			}

			.total {
				height: 44rpx;
				color: rgba(23, 1, 1, 100);

				font-size: 32rpx;
				margin-top: 36rpx;

				text {
					color: #d4201f;
					font-size: 32rpx;
				}
			}

			.add {
				display: flex;
				justify-content: start;
				margin-top: 30rpx;

				&-card {
					color: rgba(166, 159, 159, 91);
					font-size: 32rpx;
					text-align: center;
					font-family: PingFangSC-regular;
					line-height: 56rpx;
					margin-left: 20rpx;
				}

				view {
					height: 56rpx;

					img {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}

			position: absolute;
			top: 50rpx;
			padding: 0 35rpx;
			width: 100%;

			&-icon {
				width: 100%;

				&>view {
					.icon-name {
						text-align: center;
						font-size: 36rpx;
						color: #fff;
						padding-top: 10rpx;
					}

					&:nth-child(1) {
						text-align: center;

						// width: 180rpx;

						img {

							border-radius: 15rpx;
							// width: 126rpx;
							height: 244rpx;

						}
					}


				}
			}

			&-card {
				border-radius: 40rpx;
				border: 1px solid rgba(221, 216, 216, 45);
				margin-top: 65rpx;
				background: #fff;
				padding: 30rpx 60rpx;

				.title {
					line-height: 60rpx;
					color: #170101;
					font-size: 32rpx;
				}

				.input {
					background: #f5f3f3;
					height: 96rpx;
					margin-top: 24rpx;
					text-align: center;
				}

				.invest {
					.cami {
						display: flex;
						justify-content: space-between;
						height: 120rpx;

						&>view {
							&:nth-child(1) {
								position: relative;

								.cancel {
									position: absolute;
									right: -10rpx;
									top: 10rpx;
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						&-money {
							line-height: 160rpx;
						}

						&-input {
							width: 560rpx;
						}
					}

					margin: 20rpx 0 0 0;

					&-title {
						color: rgba(16, 16, 16, 100);
						font-size: 32rpx;
					}
				}
			}

			&-card1 {
				border-radius: 40rpx;
				border: 1px solid rgba(221, 216, 216, 45);
				// margin-top: 65rpx;
				margin: 30rpx 0rpx;
				background: #fff;
				padding: 14rpx 20rpx;

				.title {
					line-height: 60rpx;
					color: #170101;
					font-size: 32rpx;
				}

				.input {
					background: #f5f3f3;
					height: 96rpx;
					margin-top: 24rpx;
					text-align: center;
				}

				.invest {
					.cami {
						display: flex;
						justify-content: center;
						height: 120rpx;

						&>view {

							display: flex;
							justify-content: center;

							&:nth-child(1) {
								position: relative;

								.cancel {
									position: absolute;
									right: -10rpx;
									top: 10rpx;
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						&-money {
							line-height: 160rpx;
						}

						&-input {
							width: 560rpx;
						}
					}

					margin: 20rpx 0 0 0;

					&-title {
						color: rgba(16, 16, 16, 100);
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>

<template>
	<view class="container">
		<view class="box"></view>
		<view class="content">


			<u-modal v-model="telshow" :show-cancel-button="calflag" @confirm="dosunmit()" title="信息确认">
				<view class="slot-content">
					<view class="test" style="color: ;font-size: 28rpx;">请核对手机号跟加油卡号是否正确，<text
							style="color: #FA3534">加油卡号必须为主卡，副卡充值会按失败处理</text>。</view>
					<view class="test" style="color: #007AFF;font-size: 28rpx;"></view>
					<view class="test">手机号：{{this.form.tel}}</view>
					<view class="test">加油卡号：{{this.form.cardNumber}} </view>
				</view>
			</u-modal>

			<view class="content-icon u-flex u-row-center " v-for="(item, index) in iconList" :key="item.ID">
				<view>
					<view>
						<img :src="item.URL" @click="click(index)" />

					</view>
					<view class="icon-name"> {{ item.Name }}</view>

				</view>
			</view>
			<view class="content-card">
				<view class="title"> 根据商务部监管要求,您需要输入卡号和</view>
				<view class="title">卡密信息才能使用油卡兑换功能</view>
				<input type="number" class="input" placeholder-style="font-size: 25rpx;" placeholder="请输入正确的手机号码"
					maxlength="11" v-model="form.tel" />
				<input type="number" class="input" maxlength="19" placeholder-style="font-size: 25rpx;"
					placeholder="请输入您的19位中国石化油卡卡号（仅限主卡）" v-model="form.cardNumber" />
				<view class="invest">
					<view class="invest-title">卡密充值:</view>
					<view class="cami" v-for="(item, index) in cardList" :key="index">
						<view>
							<input type="text" v-model="item.value" class="input cami-input"
								:class="{'errcode':item.errcode ==0}" placeholder-style="font-size: 25rpx;"
								placeholder="请输入发放的卡密" maxlength="10" />
							<img v-show="item.clear" @click="reduce(index)" src="../../static/reduce.png"
								class="cancel" />
						</view>
						<!-- <view class="cami-money">50元</view> -->
					</view>
				</view>
				<view class="add">
					<view>
						<img @click="add" class="img" src="../../static/plus-square.png" alt="" />
					</view>
					<view class="add-card">新增卡密</view>
				</view>
				<view class="total">
					充值总金额：<text v-model="form.scretSum">{{this.checMoney()}}</text></view>
			</view>
			<view class="tip">
				温馨提示
			</view>
			<!-- <view class="info"> 充值总金额为50元、100元、200元;</view> -->
			<view style="color: #FA3534; font-size: 36rpx;" class="info">
				1．同一卡号／手机号一天内仅可充值1次
			</view>
			<view class="info">2．充值失败请检查是否手机号跟油卡是否绑定，<text
					style="color: #FA3534; font-size: 36rpx;">仅限主卡充值</text>，备注：司机卡、挂失卡、副卡、过期卡、销户卡、增票卡（绑定增值税发票的加油卡）都不支持充值。
			</view>
			<view class="info">3. 充值完成后可在下方输入手机号查询充值记录</view>
			<view class="info">4. 充值大约30分钟之内到账，如有问题，请咨询021-26053992</view>
			<view class="info">5. 客服时间：周一到周五10:00-11:30 13:30-18：00（节假日除外）</view>
			<view class="content-card1">
				<u-search maxlength="11" placeholder="请输入手机号进行兑换记录查询" v-model="keyword" @search="dotel(keyword)"
					@custom="dotel(keyword)" action-text="查询"></u-search>
			</view>
			<view class="btn" @click="submit">
				立即充值
			</view>
			<view class="rule">
				<u-checkbox-group>
					<u-checkbox @change="agree" v-model="isAgree">同意<text @click.stop="catRule">《油卡充值协议》</text>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errcode: 1,
				// border: 0, // (默认选中的为0)加油卡类型（0:中国石油 1：中国石化）
				cardList: [{
					value: "",
					errcode: 1
				}, ],
				code: "",
				keyword: "",
				isAgree: false,
				telshow: false,
				calflag: true,
				iconList: [{
					URL: "https://xianduioss.oss-cn-beijing.aliyuncs.com/deferImg/good_info/zgsh.png",
					ID: 1,
					Name: "- 为美好生活加油 -",
				}],
				form: {
					tel: "",
					cardNumber: "",
					cardNumberType: 1,
					scretpackge: "",
					scretSum: 0,
					scretAmount: 1,
				},
				user: {
					code: ""
				},
			};
		},


		methods: {


			dotel(tel) {
				if (!tel) {
					this.utils.toast("请输入你的手机号");
					return false;
				}

				// 2.手机格式效验
				if (!this.utils.checkPhone(tel)) {
					this.utils.toast("手机号格式不正确");
					return false;
				}

				uni.navigateTo({
					url: "../order/order?tel=" + tel
				});


			},
			checMoney() {
				let arr = [];
				let fiftyMoney = 0;
				let oneHundred = 0;
				this.cardList.forEach(val => {
					let value = val.value.replace(/\s+/g, "");
					if (value.length === 8) {
						fiftyMoney += 1;
					}
					if (value.length === 10) {
						oneHundred += 1;
					}
					arr.push(value)
				})
				this.form.scretAmount = fiftyMoney + oneHundred;
				this.form.scretSum = (50 * fiftyMoney) + (100 * oneHundred)
				return this.form.scretSum;
			},

			checkScret(scret) {
				if (scret.length !== 0 && (scret.length !== 8 && scret.length !== 10)) {
					this.form.scretSum = 0;
					this.utils.toast("卡密错误，请检查卡密是否正确");
					return;
				}
			},

			dosunmit() {
				this.exchange()
			},

			exchange() {
				this.httpClient
					.post({
						url: this.APIPath.exchange.index,
						data: this.form,
					}).then((res) => {

						if (res.code == -2) {

							this.cardList.map(obj => {
								if (obj.value === res.data) {
									// obj.errcode = 0;
									this.$set(obj, 'errcode', 0)
								}
								return obj;
							})
						}

						if (res.code == 200) {
							let telparam = this.form.tel;
							this.form.tel = '';
							this.form.cardNumber = '';
							this.cardList = [{
								value: ""
							}]
							this.utils.toast("兑换成功");
							uni.navigateTo({
								url: "../order/order?tel=" + telparam
							});
						}

					});
			},
			add() {
				let list = this.cardList;
				if (list.length > 10) {
					this.utils.toast("最多添加10个卡密框");
					return false;
				}
				let obj = {
					value: "",
					clear: true,
				};
				list.push(obj);
				this.form.scretAmount = this.cardList.length;
			},
			reduce(index) {
				let list = this.cardList;
				list.splice(index, 1);
				this.form.scretAmount = this.cardList.length;
			},
			agree(e) {
				this.value = !e.value;
			},

			catRule() {
				uni.navigateTo({
					url: "../agreement/agreement",
				});
			},

			submit() {
				// 1.卡密效验
				if (!this.form.tel) {
					this.utils.toast("请输入你的手机号");
					return false;
				}

				// 2.手机格式效验
				if (!this.utils.checkPhone(this.form.tel)) {
					this.utils.toast("手机号格式不正确");
					return false;
				}

				// 3.油卡非空效验
				if (!this.form.cardNumber) {
					this.utils.toast("请输入卡号");
					return false;
				}




				let arr = [];
				this.cardList.forEach(function(val) {
					arr.push(val.value)
				})

				if (arr[0] === "") {
					this.utils.toast("请输入卡密");
					return false;
				}
				if (arr[1] === "") {
					arr.splice(1, 1);
				}
				let scretpackge = arr.join(",");

				this.form.scretpackge = scretpackge;
				this.form.scretAmount = arr.length;


				let checksums = [50, 100, 500];
				if (!checksums.includes(this.form.scretSum)) {
					this.utils.toast("单次充值总金额应为50元、100元，500元 烦请重新输入");
					return false;
				}

				// 1是否同意油卡协议
				if (!this.isAgree) {
					this.utils.toast("请勾选油卡协议");
					return false;
				}

				this.cardList.map(obj => {
					this.$set(obj, 'errcode', 1)
					return obj;
				})



				this.telshow = true;
				return;

				// this.exchange();
			},
			
			//初始化页面
			initConfig() {
				this.httpClient
					.get({
						url: this.APIPath.initIndex.index
					})
					.then((res) => {
						if (!res.data.isStatus) {
							debugger
							uni.navigateTo({
								url: "../maintain/index"
							});
						}
					});
			}
		},
		created() {
			this.initConfig()
		}
	};
</script>
